<template>
	<div class="goods-new" id="special-new">
		<p class="rules" @click="ruleVisible = true">免单规则<i class="iconfont icon-bangzhu"></i></p>
		<!--新人专属列表-->
		<van-pull-refresh v-model="isRefresh" @refresh="onRefresh">
			<van-list
				v-model="loading"
				:finished="finished"
				:error.sync="error"
				@load="loadMore"
				finished-text="没有更多了"
				loading-text="拼命加载中"
			>
				<div class="one-change" :class="[{ used: userInfo.newPerson === 0 }]">
					<i class="iconfont icon-webicon209"></i>
					<p v-if="userInfo.newPerson === 1">您还有1次抢购机会</p>
					<p v-else>您已是老用户，新人免单已失效，去看看其他好物吧！</p>
				</div>
				<!--商品列表-->
				<div class="goods-list" v-if="goodsList.length > 0">
					<div class="goods-wrap" v-for="(item, index) in goodsList" :key="index">
						<new-item ref="goodsItem" :item="item" @refresh="refresh" :newPerson="userInfo.newPerson"></new-item>
					</div>
				</div>

				<!--骨架屏-->
				<van-skeleton
					v-for="i in 3"
					:key="i + 'i'"
					avatar
					avatar-size="120"
					avatar-shape="square"
					row="4"
					:row-width="['100%', '80%', '30%', '90%']"
					:loading="loading"
				></van-skeleton>

				<div slot="error">
					<empty emptyText="暂无商品" offsetTop="150"></empty>
				</div>
			</van-list>
		</van-pull-refresh>

		<!--回到首页-->
		<div class="backHome" @click="$router.push('/index')">
			<svg-icon iconName="shouye"></svg-icon>
		</div>

		<van-popup class="rule-popup" v-model="ruleVisible" closeable>
			<div class="main">
				<h2>新人免单规则</h2>
				<p>1.适用范围：仅限从未在本平台下过单的新用户。所有免单商品，任选其一。</p>
				<p>2.仅限在此页面首次点击复制口令后下单的商品。</p>
				<p>3.首次复制口令成功但未在优惠券有效期内下单的，新人免单将失效。</p>
				<p>4.免单商品只限商品指定SKU价格，超出部分由用户自行承担本平台不再另行补贴。</p>
				<p>5.免单商品采用先下单后补贴，用可在【我的】->【我的订单】中查看订单。</p>
			</div>
		</van-popup>
	</div>
</template>

<script>
import { PullRefresh, List, Skeleton, Popup } from 'vant';
import { NewItem } from './components';
import { Empty } from '@/components';
import { mapGetters } from 'vuex';
export default {
	name: 'special-zero',
	components: {
		NewItem,
		Empty,
		'van-pull-refresh': PullRefresh,
		'van-list': List,
		'van-skeleton': Skeleton,
		'van-popup': Popup
	},
	data() {
		return {
			isRefresh: false, // 控制是否刷新
			loading: false, // 控制loading显示
			finished: false, // 控制是否加载更多商品
			error: false,
			goodsList: [],
			params: {
				page: 1,
				size: 20,
				newPerson: 1
			},
			ruleVisible: false
		};
	},
	computed: {
		...mapGetters(['userInfo'])
	},
	mounted() {
		this.$store.dispatch('GET_USERINFO');
		document.getElementById('special-new').style.minHeight = document.documentElement.clientHeight + 'px';
	},
	methods: {
		// 刷新
		refresh() {
			this.error = false;
			this.goodsList = [];
			this.loading = true;
			this.finished = false;
			this.params.page = 1;
			this.loadMore();
		},
		// 下拉刷新
		onRefresh() {
			this.error = false;
			this.goodsList = [];
			this.loading = true;
			this.finished = false;
			this.params.page = 1;
			this.loadMore('refresh');
		},
		// 追加数据
		loadMore(operate) {
			this.$service.shopping.goods.newPersonGoodsList(this.params).then(res => {
				this.goodsList = this.goodsList.concat(res.list);
				// 加载状态结束
				this.loading = false;
				this.params.page += 1;

				// 刷新列表
				if (operate === 'refresh') {
					this.$toast('刷新成功');
					this.isRefresh = false;
				}

				// 数据全部加载完成
				if (this.goodsList.length === 0) {
					this.params.page = 1;
					this.error = true;
				} else if (this.goodsList.length >= res.pagination.total) {
					this.finished = true;
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.goods-new {
	background: #ff474a url('../../../assets/images/index/special/new-background.jpeg') no-repeat top;
	background-size: 100%;
	width: 100%;
	min-height: 100%;
	padding-top: 328px;
	padding-bottom: 25px;
	position: relative;
	.rules {
		position: absolute;
		top: 50px;
		right: 0;
		color: #fdffff;
		font-size: 22px;
		padding: 4px 10px 4px 20px;
		border-radius: 50px 0 0 50px;
		background: rgba(0, 0, 0, 0.3);
		i {
			margin-left: 4px;
			font-size: 22px;
		}
	}
	/deep/.van-pull-refresh {
		width: 700px;
		padding: 30px 24px;
		margin: 0 auto;
		border-radius: 32px;
		background: $color-white;
		.van-list {
			min-height: 850px;
			.one-change {
				width: 100%;
				height: 60px;
				background: #ffe6e6;
				color: #f70114;
				font-size: 28px;
				text-align: center;
				border-radius: 20px 20px 0 0;
				margin-top: -8px;
				margin-bottom: 20px;
				@include flexBox(center, center);
				&.used {
					background: #eaeaea;
					color: #838383;
					font-size: 24px;
				}
				i {
					font-size: 40px;
					margin-right: 10px;
				}
			}
			.goods-list {
				margin-bottom: 30px;
				.goods-wrap {
					margin-top: 30px;
					padding-top: 30px;
					border-top: 2px dotted #e2e2e2;
					&:first-child {
						margin-top: 0;
						padding-top: 0;
						border-top: none;
					}
				}
			}
			.van-skeleton {
				padding: 0 0 30px 0;
				margin-bottom: 30px;
				border-bottom: 2px dotted #f2f3f5;
				.van-skeleton__avatar {
					width: 37% !important;
					height: 0 !important;
					padding-bottom: 37%;
					border-radius: 20px;
				}
				.van-skeleton__content {
					padding-top: 0;
					@include flexBox(space-between, null, column);
					.van-skeleton__row {
						border-radius: 8px;
					}
				}
			}
		}
		.van-list__finished-text {
			border-top: 2px dotted #e2e2e2;
		}
	}
	.back-home {
		border-radius: 50px;
		background: $color-white;
		position: fixed;
		bottom: 40px;
		padding: 10px;
		opacity: 0.9;
		left: 30px;
		@include flexBox(center, center);
		svg {
			width: 50px;
			height: 48px;
		}
	}
}
.rule-popup {
	width: 600px;
	border-radius: 16px;
	padding: 50px 40px;
	.main {
		h2 {
			font-size: 32px;
			text-align: center;
			margin-bottom: 50px;
			color: #383434;
		}
		p {
			font-size: 26px;
			color: #616161;
			margin-bottom: 10px;
		}
	}
}
// 判断iphoneX 将 footerBox 的 padding-bottom 填充到最底部
@supports (bottom: env(safe-area-inset-bottom)) {
	.back-home {
		margin-bottom: env(safe-area-inset-bottom);
	}
}
</style>
